<template>
  <div class="post-item">
    <section class="right">
      <div class="right-top">
        <h4>{{ post.title }}</h4>
        <section class="left">
          <div><img :src="author.avatar" alt="" /></div>
        </section>
      </div>
      <div>
        {{ post.content }}
      </div>
      <div class="imglist">
        <img :src="item" alt="" v-for="item in post.imgList" :key="item" />
      </div>
      <div class="right-bottom">
        <i
          v-for="(item, index) in iconFunctions"
          :key="item.icon"
          :class="['iconfont', item.icon]"
          :style="item.addStyle ? item.style : {}"
          @click="iconFun(index)"
        ></i>
      </div>
      <div class="comment" v-if="commenting">
        <div>
          <input type="text" placeholder="请输入" v-model="content" />
        </div>
        <el-button type="primary" style="width: 20%" @click="postComment"
          >确认</el-button
        >
      </div>
    </section>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import request from "../../../utils/request";
let content = ref("");
const iconFunctions = ref([
  {
    icon: "icon-dianzan",
    style: {
      color: "red",
    },
    addStyle: false,
  },
  {
    icon: "icon-31pinglun",
    style: {
      color: "red",
    },
    addStyle: false,
  },
  {
    icon: "icon-shoucang",
    style: {
      color: "red",
    },
    addStyle: false,
  },
  {
    icon: "icon-tousujubao",
    style: {
      color: "red",
    },
    addStyle: false,
  },
]);
let commenting = ref(false);
let clickIndex = ref(-1);
function iconFun(e) {
  clickIndex.value = e;
  iconFunctions.value[e].addStyle = !iconFunctions.value[e].addStyle;
  if (e == 1 || e == 3) commenting.value = !commenting.value;
  else commenting.value = false;
}
watch(clickIndex, () => {
  if (clickIndex.value == 0) {
    request(
      "https://mockapi.eolink.com/SHQdMWnc0600b265c0d20410ed7c36e0eec1dc8fe7e5087/post/like?responseId=1201987",
      {
        postId: props.post.id,
      },
      1
    ).then((res) => {
      console.log(res);
    });
  }
});
function postComment() {
  request(
    clickIndex.value == 1
      ? "https://mockapi.eolink.com/SHQdMWnc0600b265c0d20410ed7c36e0eec1dc8fe7e5087/post/comment?responseId=1201988"
      : "https://mockapi.eolink.com/SHQdMWnc0600b265c0d20410ed7c36e0eec1dc8fe7e5087/post/report?responseId=1202676",
    {
      postId: props.post.id,
      comment: content.value,
      createTime: Date.now(),
    },
    1
  ).then((res) => {
    console.log(res);
    commenting.value = false;
    ElMessage({
      message: "成功",
      type: "success",
    });
  });
}
const props = defineProps({
  author: {
    type: Object,
    default() {
      return {
        avatar:
          "https://img.wxcha.com/m00/e2/d8/7b715d6aeee61f9cf108b10feec0a73f.jpg",
        email: "2632118257@qq.com",
      };
    },
  },
  post: {
    type: Object,
    default() {
      return {
        id: 1,
        title: "标题",
        content: "this is a long content",
        imgList: [
          "https://img.wxcha.com/m00/65/4e/89433954b6fdfacab88ffcdb8e84158e.jpg",
          "https://img.wxcha.com/m00/39/43/e6ae8ffa55fb94cb153dc68478f34487.jpg",
          "https://img.wxcha.com/m00/b1/f1/02f88b513270b954fd378020cdb88faf.jpg",
          "https://img.wxcha.com/m00/dc/88/39b9dc6a36097c602ede874e0185312b.jpg",
        ],
      };
    },
  },
});
</script>
<style scoped lang='less'>
.post-item {
  width: 100%;
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-around;
  background-color: #fff;
  color: black;
  border-radius: 1rem;
  padding: 1rem;
  padding-bottom: 0.4rem;
}
.left {
  // position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }
}
.center {
  height: 80%;
  width: 1px;
  background-color: #f5f5f5;
}
.right {
  width: 90%;
  margin: 1rem auto;
  text-align: left;
  &-top {
    display: flex;
    justify-content: space-between;
  }
  &-bottom {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-around;
  }
  .imglist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    img {
      // width: 20rem;
      // height: 20rem;
      flex: 1;
      width: 33%;
      min-width: 33%;
      max-width: 33%;
      border-radius: 5px;
      margin-right: 0.3%;
      margin-top: 1rem;
    }
  }
  .comment {
    display: flex;
    justify-content: space-between;
    height: 32px;
    div {
      width: 75%;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 5px;
      background-color: #f2f3f5;
      input {
        box-sizing: border-box;
        border-radius: 5px;
        width: 100%;
        height: 3rem;
        padding: 0;
        border: 0;
        outline: none;
        padding-left: 5px;
        background-color: #f2f3f5;
        &:focus {
          border: 1px solid #1e80ff;
          background-color: #fff;
        }
      }
    }
  }
}
.dianzan {
  animation: dianzan 2s;
}
@keyframes dianzan {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(30deg);
  }
  60% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0);
  }
}
</style>